<template>
  <div
    class="custom_gotop"
    v-if="isTopShow"
    @click="gotopClickHandle"
    :style="{ bottom: ($isMPWeiXin ? 180 : 140) / 23.44 + 'rem' }"
  >
    <van-icon name="arrow-up"></van-icon>
  </div>
</template>
<script>
export default {
  name: "gotop",
  props: {
    isShow: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      isTopShow: false,
    };
  },
  mounted() {
    let that = this;
    that.isTopShow = that.$props.isShow;
    window.addEventListener("scroll", () => {
      let top = that.$query(document).scrollTop();
      if (top > 300) {
        that.isTopShow = true;
      } else {
        that.isTopShow = false;
      }
    });
  },
  methods: {
    gotopClickHandle() {
      window.scrollTo(0, 0);
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_gotop {
  position: fixed;
  bottom: (140 / @base);
  right: (30 / @base);
  border-radius: (26 / @base);
  background-color: rgba(255, 255, 255, 0.8);
  width: (26 / @base);
  height: (26 / @base);
  line-height: (26 / @base);
  padding: (5 / @base);
  font-size: (26 / @base);
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
}
</style>
